<template>
  <div class="container">
    <div class="mark"></div>
    <div class="nav">
      <div class="logo">
        <h1>
          <router-link to="/">BFBbs</router-link>
        </h1>
      </div>
      <div class="options">
        <router-link to="/layout" class="router-link-active">
          发现
        </router-link>
        <router-link to="/layout/book" class="router-link-active">
          书籍
        </router-link>
        <router-link to="/layout/film" class="router-link-active">
          影视
        </router-link>
        <div class="info">
          <el-button v-if="!isShowLogin" class="btnDiv" @click="goToLogin"
            >登陆/注册</el-button
          >
          <div v-else class="info-user">
            <span class="nickname">用户昵称fffffffffff </span>
            <el-dropdown style="width: 30%">
              <span class="el-dropdown-link">
                <el-avatar
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item divided>
                  <span @click="exit">退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div class="login" v-show="isShow">
      <div class="container-header">
        <i class="el-icon-user"></i>
        <h3>用户登录</h3>
      </div>
      <div class="container-form">
        <el-form
          ref="loginForm"
          label-position="top"
          label-width="80px"
          :model="loginForm"
          :rules="rulesLogin"
        >
          <el-form-item prop="username" label="用户名">
            <el-input
              v-model="loginForm.username"
              prefix-icon="el-icon-user"
              :clearable="true"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input
              v-model="loginForm.password"
              type="password"
              prefix-icon="el-icon-lock"
              show-password
              :clearable="true"
            ></el-input>
          </el-form-item>
          <el-form-item prop="captcha" label="验证码">
            <el-input style="width: 44%" v-model="loginForm.captcha"></el-input>
            <span class="verify">
              <span class="code">{{ code }}</span>
              <span class="refresh" @click="getCode">刷新换一个</span>
            </span>
          </el-form-item>
        </el-form>
        <div class="container-btn">
          <el-button
            type="primary"
            style="width: 150px"
            @click="login"
            :loading="loading"
            >登陆</el-button
          >
          <el-button style="width: 150px" @click="toggle">去注册</el-button>
        </div>
      </div>
    </div>
    <div class="register" v-show="!isShow">
      <div class="container-header">
        <i class="el-icon-user"></i>
        <h3>用户注册</h3>
      </div>
      <div class="container-form">
        <el-form
          ref="registerForm"
          label-position="top"
          label-width="80px"
          :model="registerForm"
          :rules="rulesRegister"
        >
          <el-form-item prop="username" label="用户名">
            <el-input
              v-model="registerForm.username"
              :clearable="true"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input
              v-model="registerForm.password"
              :clearable="true"
              prefix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPwd" label="再次输入密码">
            <el-input
              v-model="registerForm.checkPwd"
              :clearable="true"
              prefix-icon="el-icon-lock"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="container-btn">
          <el-button
            type="primary"
            style="width: 150px"
            @click="register"
            :loading="loading"
            >注册</el-button
          >
          <el-button style="width: 150px" @click="toggle">去登陆</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userRegister, getVerifyCode, userLogin, logout } from "@/api/user";
import userInfo from "@/utils/userInfo.js";
export default {
  name: "LoginView",
  data() {
    return {
      loading: false,
      activeIndex: "",
      loginForm: {
        username: "13597939070",
        password: "Ym231230",
        captcha: "",
      },
      registerForm: {
        username: "",
        password: "",
        checkPwd: "",
      },
      code: "",
      isShowLogin: "",
      isShow: true,
      // 登陆校验
      rulesLogin: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        captcha: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 4, max: 4, message: "请输入4位验证码", trigger: "blur" },
        ],
      },
      // 注册校验
      rulesRegister: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 6,
            max: 11,
            message: "长度在 6 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度不能低于6位", trigger: "blur" },
        ],
        checkPwd: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.password) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getCode();
    this.isLogin();
  },
  methods: {
    goToLogin() {
      this.$router.push("/login");
    },
    // 判断是否登陆
    isLogin() {
      const token = localStorage.getItem("token") ? true : false;
      this.isShowLogin = token;
    },
    // 表单切换
    toggle() {
      this.isShow = !this.isShow;
      this.loading = false;
      this.form = {};
      // 重置表单
      if (this.isShow) {
        this.$refs.registerForm.resetFields();
      } else {
        this.$refs.loginForm.resetFields();
      }
    },
    // 登陆
    login() {
      this.$refs.loginForm.validate(async (v) => {
        try {
          this.loading = true;
          if (this.loginForm.captcha !== this.code) {
            this.$message.error("验证码错误");
            this.getCode();
            return;
          }
        } finally {
          this.loading = false;
        }
        try {
          this.loading = true;
          if (v) {
            const res = await userLogin(this.loginForm);
            localStorage.setItem("token", res.data.token);
            userInfo.setUser({
              nickname: res.data.nickName,
              avatar: res.data.avatar,
              userId: res.data.id,
            });
            this.$router.push("/layout/book");
          }
        } finally {
          this.loading = false;
        }
      });
    },
    // 注册
    register() {
      this.$refs.registerForm.validate(async (v) => {
        if (v) {
          this.loading = true;
          try {
            const res = await userRegister(this.registerForm);
            console.log(res);

            if (res.code === 1) {
              this.toggle();
            }
          } finally {
            this.loading = false;
          }
        }
      });
    },
    // 获取验证码
    async getCode() {
      const res = await getVerifyCode();
      this.code = res.data;
    },
    // 退出登录
    async exit() {
      await logout();
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      this.isLogin();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  min-width: 1256px;
  position: relative;
  .mark {
    width: 100%;
    height: 376px;
    background-color: rgb(70, 70, 70);
  }
  .nav {
    min-width: 784px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      .router-link-active {
        color: #fff;
        text-decoration: none;
      }
    }
    .options {
      width: 30%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .router-link-active {
        color: #fff;
        text-decoration: none;
        transition: background 0.3s, transform 0.1s;
        &:hover {
          transform: scale(1.08);
        }
        &.active {
          color: #67c23a;
        }
      }
      .info {
        width: 26%;
        .info-user {
          display: flex;
          align-items: center;
          .nickname {
            display: inline-block;
            width: 70%;
            font-size: 16px;
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .container-header {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    i {
      font-size: 50px;
    }
    h3 {
      margin-top: 10px;
      font-size: 26px;
      letter-spacing: 3px;
    }
  }
  .container-form {
    position: absolute;
    top: 72%;
    left: 50%;
    transform: translate(-50%);
    padding: 30px;
    width: 400px;
    height: 400px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    .verify {
      display: inline-block;
      width: 56%;
      text-align: right;
      .code {
        display: inline-block;
        width: 100px;
        margin-right: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        text-align: center;
        font-size: 22px;
        letter-spacing: 5px;
      }
      .refresh {
        font-size: 12px;
        color: #999;
        cursor: pointer;
      }
    }
  }
  .container-btn {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
  }
}
/*鼠标点击后移开，恢复本身样式*/
.btnDiv,
.btnDiv:focus:not(.btnDiv:hover) {
  margin-right: 12px;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 #f4f4f4;
  color: #2794f8;
  background: white;
}
/*鼠标按下，没有抬起*/
.btnDiv:active {
  border: 1px solid #fff;
  color: #2794f8;
}
// elementui表单设置
.el-form-item {
  margin: 0 0 8px;
}
/deep/.el-form--label-top .el-form-item__label {
  padding: 0;
}
</style>